﻿@{
    ViewBag.Title = "STK Ambavahadimitafo";
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            <p>
                "Hitory ny Anaranao amin'ny rahalahiko aho..." Sal 22,22a
            </p>
        </div>
    </section>
}
<h3>We suggest the following:</h3>
<div style="float:left;margin-bottom:10px;">
    <img src="@Url.Content("~/TEMP_PHOTOS/loeva.jpg")" />
    <img src="@Url.Content("~/TEMP_PHOTOS/loeva.jpg")" width="198" />
</div>
<div style="margin-right:10px;clear:both;">
    <span>X</span><input type="text" id="xx" value="0"/>
	<span>Y</span><input type="text" id="yy" value="0"/><br />
	<span>temp_w</span><input type="text" id="xx_" value="0"/><br/>
	<span>temp_h</span><input type="text" id="yy_" value="0"/>
</div>
<div>
	<span>top</span><input type="text" id="xx__" value="0"/><span>left</span><input type="text" id="yy__" value="0"/><br />
	<span>bottom</span><input type="text" id="xx___" value="0"/><span>right</span><input type="text" id="yy___" value="0"/>
</div>
<div style="width:100px;height:90px;border:1px solid black;margin-bottom:10px;overflow:hidden;position:relative;" id="clip">
    <img src="@Url.Content("~/TEMP_PHOTOS/loeva_copie.jpg")" class="clip_" onDragStart="return false;" onMouseDown="return false;" style="position:absolute;"/>   
</div> 
<div style="width:100px;height:90px;border:1px solid black;margin-bottom:10px;overflow:hidden;">
    <img src="@Url.Content("~/TEMP_PHOTOS/mod_copie.jpg")" />
</div>
<div style="width:100px;height:90px;border:1px solid black;margin-bottom:10px;overflow:hidden;">
    <img src="@Url.Content("~/TEMP_PHOTOS/cover_copie.jpg")" />
</div>
@section scripts{ 
    <script>
        var image_width = 0; var image_height = 0;
        var drag = false;
        var curX = 0; var curY = 0;
        var debX = 0; var debY = 0;
        var temp_h, temp_w; var dx = 0; var dy = 0;
        var r;
        var top_, bottom_, left_, right_;
        var dif_h, dif_w, dif_temp;                    
            $('.clip_').load(function () {
                image_width = $(this).width();
                image_height = $(this).height();//alert(image_width+' - '+image_height);
                r = $('#clip').get(0).getBoundingClientRect(); //alert('height='+r.height + '/width=' + r.width+'/top='+r.top+'/left='+r.left);
                dif_h = (parseInt(image_height) - r.height) * -1; dif_w = (parseInt(image_width) - r.width) * -1;
                //alert(dif_h + '//' + dif_w);
            });
            $('.clip_').mousedown(function (event) {
                $(this).css('cursor', 'move');
                drag = true;
                debX = event.pageX - r.left; 
                debY = event.pageY - r.top;
            });
            $('.clip_').mouseup(function (event) {
                $(this).css('cursor', 'default');
                drag = false;
                //dernière position coin supérieur gauche de l'image
                dy = $(this).css('top');
                dx = $(this).css('left');
                //alert($(this).css('top')+'///'+ $(this).css('left')+'///'+ $(this).css('bottom')+'///'+$(this).css('right'));
            });
            $('.clip_').mouseleave(function () {
                $(this).css('cursor', 'default');
                drag = false;
            });
            $('.clip_').mousemove(function (event) {
                curX = event.pageX - r.left;
                curY = event.pageY - r.top;
                temp_h = (curY - debY);
                temp_w = (curX - debX);
                if (drag == true) {
                    top_ = $(this).css('top'); left_ = $(this).css('left');
                    bottom_ = $(this).css('bottom'); right_ = $(this).css('right');
                    //
                    $('#xx').val(curX); $('#yy').val(curY);
                    $('#xx_').val(temp_w); $('#yy_').val(temp_h);
                    $('#xx__').val(top_); $('#yy__').val(left_);
                    $('#xx___').val(bottom_); $('#yy___').val(right_);                    
                    //
                    if ((temp_h == 0 && curX > debX) || (temp_h == 0 && curX < debX)) {
                        //horizontale droite ou gauche					
                        //$(this).css('left', parseInt(left_) + (((temp_w / 2)) / 10));
                    }
                    else if ((temp_w == 0 && temp_h < 0) || (temp_h < 0 && temp_w > 0) || (temp_h < 0 && temp_w < 0)) {
                        //vertical haut ou oblique haut droite ou oblique haut gauche
                        if (parseInt(top_) >= dif_h) {
                            //ne depasse pas le limite de l'image inférieur
                            $(this).css('top', parseInt(top_) + (((temp_h / 2)) / 10));
                            //$(this).css('left', parseInt(left_) + (((temp_w / 2)) / 10));
                        }
                    }
                    else if ((temp_h > 0 && temp_w == 0) || (temp_h > 0 && temp_w < 0) || (temp_h > 0 && temp_w > 0)) {
                        //vertical bas ou oblique bas gauche ou oblique bas droite
                        if (parseInt(top_) >= 0.0) {
                            //ne depasse pas le limite de l'image supérieur
                            //$(this).css('left', parseInt(left_) + (((temp_w / 2)) / 10));
                        }
                        else {
                            //$(this).css('left', parseInt(left_) + (((temp_w / 2)) / 10));
                            $(this).css('top', parseInt(top_) + (((temp_h / 2)) / 10));
                        }
                    }
                }
            });        
</script>
    }

<ol class="round">
    <li class="one">
        <h5>Getting Started</h5>
        
        <a href="http://go.microsoft.com/fwlink/?LinkId=245151">Learn more…</a>
    </li>

    <li class="two">
        
        <a href="http://go.microsoft.com/fwlink/?LinkId=245153">Learn more…</a>
    </li>

    <li class="three">
        
        <a href="http://go.microsoft.com/fwlink/?LinkId=245157">Learn more…</a>
    </li>
</ol>
